<template>
<div class="bf-commont-template">
    <!-- 在职信息 -->
    <!-- <el-card class="box-card"> -->
    <div class="clearfix card-slot m-info">
      <div class="float-l">
        <span class="bar-l"></span><span>在职信息</span>
      </div>
      <div class="float-r">
        <!-- <el-button class="car-action" type="text" @click="jobformEditFlag=!jobformEditFlag">编辑</el-button> -->
      </div>
    </div>

    <div :class="jobformEditFlag?'input-border-b':'input-border-none'" class="relative">
      <!-- <div :class="jobformEditFlag?'':'mask'"></div> -->
      <div v-if="!jobformEditFlag" class="roster-inner-detail">
        <div class="clearfix relative">
          <div v-for="item in onJobSetting" :key="item.field" class="clearfix">
            <div class="lable"><span>{{item.title}}</span></div>
            <div class="value">
              <span v-if="!item.isParams">{{customText(employeeDataCp, item)}}</span>
              <span v-if="item.isParams"> <span v-params="{code: item.paramsId, id: employeeDataCp[item.field]}"></span></span>
            </div>
          </div>

          <div class="one-action">
            <div @click="jobformEditFlag=!jobformEditFlag" class="color"><img src="../../../../../../assets/beneform4j/roster/roster_icon_edit.png" alt=""><span>编辑</span></div>
          </div>
        </div>

      </div>
      <div v-if="jobformEditFlag" class="int-content  clearfix rp-content inner">
        <el-form
          ref="form"
          :model="employeeDataCp"
          :rules="editRules"
          label-width="137px"
          :label-position="'right'"
          class="clearfix">
          <div
            v-for="item in onJobSetting"
            :key="item.field"
            v-if="!item.hideEdit"
            class="bf-table-form-item padding-l padding-r">
            <component
              v-if="!item.slot"
              v-bind:is="'bf-form-'+item.type"
              :form="employeeDataCp"
              :item="item"
              :disabled="item.disableEdit"
              :rules="editRules">
            </component>
          </div>
        </el-form>


        <div class="w-100" :hidden="!jobformEditFlag">
          <div class="w-12"></div>
          <div>
            <el-button type="primary" @click="saveJobInfo(employeeDataCp)">保存</el-button>
            <el-button  @click="jobformEditFlag=false">取消</el-button>
          </div>
        </div>
      </div>
  </div>
  <!-- </el-card> -->
  <div class="gap"></div>


  <!-- <el-card class="box-card"> -->
    <div slot="header" class="clearfix card-slot">
      <span class="bar-l"></span><span>面试记录</span>
    </div>
    <div>
        <div v-if="interData && interData.length == 0" class="data-null padding-t">
          <img src="../../../../../../assets/beneform4j/roster/icon_not_record.png" alt="">
          <div class="text-c">
            <span>
              暂无面试记录
            </span>
          </div>
        </div>
        <div class="int-content  clearfix border-b padding-t padding-b" v-for="item in interData" :key="item.id">
          <div>
            <div>面试id:</div>
            <div>{{item.intvId}}</div>
          </div>
          <div>
            <div>姓名:</div>
            <div>{{item.intvName}}</div>
          </div>
          <div>
            <div>状态:</div>
            <div>{{item.statusName}}</div>
          </div>
          <div>
            <div>面试日期:</div>
            <div>{{item.appointmentInterviewDate}}</div>
          </div>
          <div>
            <div>面试时间:</div>
            <div>{{item.appointmentInterviewTime}}</div>
          </div>
          <div>
            <div>面试地址:</div>
            <div>{{item.appointmentInterviewAddr}}</div>
          </div>
          <div >
            <div class="w-12">评语:</div>
            <div>{{item.remarks}}</div>
          </div>
        </div>
    </div>
  <!-- </el-card> -->
  <div class="gap"></div>

  <!-- <el-card class="box-card"> -->
    <div slot="header" class="clearfix">
      <div class="clearfix card-slot">
        <div class="float-l">
          <span class="bar-l"></span><span>奖惩记录</span>
        </div>
        <div class="float-r">
          <el-button class="car-action" type="text" @click="addRecord">新增</el-button>
        </div>
      </div>
    </div>
    <div>
        <div v-if="recordForm && recordForm.length == 0" class="data-null padding-t">
          <img src="../../../../../../assets/beneform4j/roster/icon_not_record.png" alt="">
          <div class="text-c">
            <span>
              暂无奖惩记录
            </span>
          </div>
        </div>
        <div  v-for="item in recordForm" :key="item.id"  :class="item._editing?'form-editing input-border-b':'form-edited input-border-none'">
          <div class="int-content clearfix rp-content relative inner">
            <!-- <div :class="item._editing?'':'mask'"></div> -->
            <div>
              <div>奖励/惩罚</div>
              <div>
                <!-- <el-input v-model="item.rpType" v-if="item._editing"></el-input> -->
                <el-select v-model="item.rpType" placeholder="请选择" v-if="item._editing">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.rpType === '1'?'奖励':'惩罚'}}</span></div>
              </div>
            </div>
            <div>
              <div>奖惩类别</div>
              <div>
                <!-- <el-input v-model="item.rpFlag" v-if="item._editing"></el-input> -->
                <el-select v-model="item.rpFlag" placeholder="请选择" v-if="item._editing">
                  <el-option
                    v-for="item in rewardType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <div class="int-iput-value"  v-if="!item._editing"><span ></span>{{customRewardType(item.rpFlag)}}</div>
              </div>
            </div>
            <div>
              <div>奖惩日期</div>
              <div>
                <!-- <el-input v-model="item.rpDate" v-if="item._editing"></el-input> -->
                <el-date-picker
                  v-if="item._editing"
                  v-model="item.rpDate"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.rpDate}}</span></div>
              </div>
            </div>
            <div>
              <div>奖惩金额</div>
              <div>
                <el-input v-model="item.rpAmt" v-if="item._editing"></el-input>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.rpAmt}}</span></div>
              </div>
            </div>
            <div>
              <div>奖惩原因</div>
              <div>
                <el-input v-model="item.rpCause" v-if="item._editing"></el-input>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.rpCause}}</span></div>
              </div>
            </div>
            <div >
              <div>奖惩内容</div>
              <div>
                <el-input v-model="item.remarks" v-if="item._editing"></el-input>
                <div class="int-iput-value"  v-if="!item._editing"><span>{{item.remarks}}</span></div>
              </div>
            </div>
            <div class="w-100" v-if="item._editing">
              <div class="action-button">
                <el-button type="primary" @click="saveRecordItem(item)">保存</el-button>
                <el-button @click="item._editing = false;deleteRecordItem(item, true)">取消</el-button>
              </div>
            </div>

            <div class="list-edit" v-if="!item._editing">
              <div @click="editRecordItem(item)"><img src="../../../../../../assets/beneform4j/roster/roster_icon_edit.png" alt=""><span>编辑</span></div>
            </div>
            <div class="list-delete" v-if="item._editing">
              <div  @click="deleteRecordItem(item)"><img src="../../../../../../assets/beneform4j/roster/roster_icon_delete.png" alt=""><span>删除</span></div>
            </div>
          </div>
        </div>
    </div>
  <!-- </el-card> -->
  <div class="gap"></div>

</div>
</template>

<script>
import { getSelected } from '../../../../../api/common'
import { otherEditJobInfoApi, getEmployeeInfoApi, getIntInfoApi, rewardsApi, addRewardsApi, editRewardsApi, deleteRewardsApi } from '../api'
import { onJobSetting } from './form'
export default {
  props: ['employeeData'],
  data() {
    return {
      options: [
        {
          value: '1',
          label: '奖励'
        },
        {
          value: '2',
          label: '惩罚'
        }
      ],
      rewardType: [],
      onJobSetting: onJobSetting,
      form: {
      },
      recordForm: [
      ],
      employeeDataCp: {},
      interData: [], // 面试记录
      jobformEditFlag: false,
      statusformEditFlag: false,
      editRules: {}
    }
  },
  mounted: function() {
    // this.employeeDataCp.employeeNo = '18081610'
    this.employeeDataCp = this.employeeData
    // 员工信息
    this.getJobInfo()
    // 面试记录
    this.getIntInfo(this.employeeDataCp.employeeNo)
    // 奖惩记录
    this.getRewards(this.employeeDataCp.employeeNo)
    // 获取奖惩类别参数
    this.getRewardType()
  },
  methods: {
    customRewardType(code) {
      const len = this.rewardType.length
      for (let i = 0; i < len ;i++) {
        const item = this.rewardType[i]
        if (item.value === code) {
          return item.label
        }
      }
    },
    getRewardType() {
      getSelected('REWARDTYPE').then(response => {
        // console.log(response)
        if (response.success) {
          if (response.data) {
            this.rewardType = []
            response.data.items.forEach(v => {
              const obj = {
                value: v.itemCode,
                label: v.itemText
              }
              this.rewardType.push(obj)
            })
          }
        }
      })
    },
    customText(form, item) {
      // console.log(item)
      if (item.field === 'orgId') {
        return form.orgName
      }
      if (item.field === 'constractCompany') {
        return form.companyName
      }
      return form[item.field]
    },
    getJobInfo() {
      getEmployeeInfoApi(this.employeeDataCp.employeeNo).then(response => {
        this.employeeDataCp = response.data
      })
    },
    saveJobInfo(form) {
      // editJobInfoApi(form).then(response => {
      //   if (response.success) {
      //     this.$message({
      //       message: '员工信息修改成功',
      //       type: 'success'
      //     })
      //     this.jobformEditFlag = false
      //     this.getJobInfo()
      //   }
      // })
      // console.log(form)
      // return
      otherEditJobInfoApi(form).then(response => {
        if (response.success) {
          this.$message({
            message: '员工信息修改成功',
            type: 'success'
          })
          this.jobformEditFlag = false
          this.getJobInfo()
        }
      })
    },
    getRewards(id) {
      if (!id) {
        id = this.employeeDataCp.employeeNo
      }
      rewardsApi(id).then(response => {
        this.recordForm = response.data
      })
    },
    getIntInfo(emNo) {
      getIntInfoApi(emNo).then(response => {
        // console.log(response)
        this.interData = response.data
      })
    },
    saveRecordItem(item) {
      item.employeeNo = this.employeeDataCp.employeeNo
      // console.log(item)
      // return
      if (item._add) {
        item._add = false
        addRewardsApi(item).then(response => {
          // console.log(response)
          if (response.success) {
            item._editing = false
            this.$message({
              message: '添加奖惩记录成功',
              type: 'success'
            })
            this.getRewards()
          }
        })
      } else {
        editRewardsApi(item).then(response => {
          // console.log(Response)
          if (response.success) {
            item._editing = false
            this.$message({
              message: '修改奖惩记录成功',
              type: 'success'
            })
            this.getRewards()
          }
        })
      }
    },
    addRecord() {
      const obj = {
        _editing: true,
        _add: true
      }
      this.recordForm.unshift(obj)
    },
    editRecordItem(item) {
      this.$set(item, '_editing', true)
    },
    deleteRecordItem(item, status) {
      // 删除奖惩记录
      if (item._add === true) {
        this.recordForm.forEach((v, i) => {
          if (v == item) {
            this.recordForm.splice(i, 1)
          }
        })
        return
      }
      if (status) {
        return
      }
      deleteRewardsApi(item).then(response => {
        if (response.success) {
          item._editing = false
          this.$message({
            message: '删除奖惩记录成功',
            type: 'success'
          })
          this.getRewards()
        }
      })
    }
  }
}
</script>

<style scoped>

@import './form.css';

</style>
